<template>
<div>
  <div class="big-box">
    <div class="top-box">
      <div class="header">
          <p><span @click="fun()"><img src="/image/Mine/zjt.png" alt=""></span>
             <router-link to=""><img src="/image/Mine/gwc.png" alt=""></router-link>
          </p>
      </div>
      <div class="z">
          <div class="t"><img src="/header.jpg" alt=""></div>
          <div class="x">
            <p>tbNick_b2adh</p>
            <router-link to="/pmi" class="zizi"><p>添加资料,让大家认识你 </p></router-link>
          </div>
          <router-link to="/pmi" class="aa"><span>编辑资料</span></router-link>
      </div>
      <div class="pay">
        <ul>
          <li v-for="(v,i) in arr" :key="i">
            <span>{{v.num}}</span>
            <p>{{v.paytex}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <Zpzb/>
  <router-view></router-view>
</div>
  
</template>

<script>
import Zpzb from "com/Mine/zpzb.vue"
export default {
  components:{
    Zpzb
  },
  data(){
    return{
      arr:[
        {num:0,paytex:"关注"},
        {num:0,paytex:"粉丝"},
        {num:0,paytex:"获赞&收藏"},
      ]
    }
  },
  methods:{
    fun(){
      this.$router.push("/Mine")
    }
  }
}
</script>

<style scoped>
.big-box{
  width: 100%;
  display: flex;
  justify-content: center;
}
.header p{
  display: flex;
  justify-content: space-between;
}
.header p span img{
  margin-top: 0.06rem;
  width: 0.2rem;
  height: 0.2rem;
  vertical-align: middle;
}
.header p .router-link-active img{
  width: 0.28rem;
  height: 0.28rem;
}
.top-box{
  border-radius: 0 0 0.1rem 0.1rem;
  box-shadow: 0rem 0.0456rem 0rem 0rem #f2f2f2;
  width: 90%;
}
.header{
  margin-top: 0.18rem;
}
.z{
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
}
.x{
  margin-left: 0.1rem;
}
.x p:nth-child(1){
  font-weight: bold;
  font-size: 0.16rem;
  margin-bottom: 0.07rem;
}
.x .zizi p{
  font-weight: normal;
  font-size: 0.11rem;
  width: 1.25rem;
  color: #313131;
  background: url(/../image/Mine/yjt.png) no-repeat 105% 37%;
  background-size: 0.2rem 0.2rem;
}
.z .t{
  width: 0.70rem;
  height: 0.70rem;
  border-radius: 50%;
  overflow: hidden;
}
.z .t img{
  width: 0.70rem;
  height: 0.70rem;
}
.z .aa{
  position: absolute;
  right: 5%;
  font-size: 0.15rem;
  border-radius: 0.5rem;
  color: #2d2d2d;
  border: 0.02rem solid #323232;
  padding: 0.08rem 0.12rem;
}
.pay{
  margin-top: 0.2rem;
}
.pay ul{
  display: flex;
  justify-content: space-around;
}
.pay ul li{
  text-align: center;
  width: 33.333%;
}
.pay ul li span{
  font-weight: bold;
  font-size: 0.15rem;
}
.pay ul li p{
  font-size: 0.13rem;
  color: #8e8e8e;
  margin-bottom: 0.07rem;
}
</style>